<template>
    <view class="content">
        <!-- 头部 -->
        <u-navbar :fixed="true" :shadow="true" :safeAreaInsetTop="true" :placeholder="true"
            leftIconColor="#151C24" @leftClick="back" title="考勤打卡">
        </u-navbar>
        
        <!-- 选择人员 -->
        <view class="u-m-t-30 select-member">
            <view class="uni-area u-flex u-row-between">
                <view>
                    <view class="u-flex u-font-32">
                        <text class="u-m-r-50 font-bold">{{memberDetail.xm}}</text>
                        <text class="u-m-r-50 uni-dec-color">{{memberDetail.xb}}</text>
                        <u-button class="select-btn" type="primary" shape="circle" :plain="true" text="选择人员"
                            @tap="selectMember"></u-button>
                    </view>
                    <view class="u-m-t-40 u-font-28">
                        <text class="u-m-r-20 uni-dec-color">证件号码</text>
                        <text>{{$tools.formatIdentity(memberDetail.zjhm)}}</text>
                    </view>
                    <view class="u-m-t-20 u-font-28">
                        <text class="u-m-r-20 uni-dec-color">所属班组</text>
                        <text class="u-m-r-20">{{memberDetail.bzmc}}</text>
                    </view>
                </view>
                <!-- 打卡 -->
                <u-button :class="['circle',clockType?'active-bgcolor':'']" type="primary" text="打卡" @tap="goClock"></u-button>
            </view>
        </view>


        <view class="uni-area">
            <!-- 设置打卡规则 -->
            <view v-if="clockRule" class="u-m-t-30 u-flex u-row-between">
                <view :class="['clock-item',clockType==1?'active-bgcolor':'']" @tap.stop="clockType=!clockRule[0].zzjcsj?1:0">
                    <view class="u-m-b-20 u-font-28 font-bold">
                        上班时间<text class="u-m-l-14">{{clockRule[0].amworkon}}</text>
                    </view>
                    <view v-if="clockRule[0].zzjcsj" class="u-font-26 font-bold uni-gery-color">
                        打卡时间<text class="u-m-l-14">{{$moment(clockRule[0].zzjcsj).format('HH:mm')}}</text>
                    </view>
                    <view v-else class="u-font-26 font-bold uni-gery-color">未打卡</view>
                </view>
                <view :class="['clock-item',clockType==2?'active-bgcolor':'']" @tap.stop="clockType=!clockRule[0].zwccsj?2:0">
                    <view class="u-m-b-20 u-font-28 font-bold">
                        下班时间<text class="u-m-l-14">{{clockRule[0].pmworkoff}}</text>
                    </view>
                    <view v-if="clockRule[0].zwccsj" class="u-font-26 font-bold uni-gery-color">
                        打卡时间 <text class="u-m-l-14">{{$moment(clockRule[0].zwccsj).format('HH:mm')}}</text>
                    </view>
                    <view v-else class="u-font-26 font-bold uni-gery-color">未打卡</view>
                </view>
            </view>

            <!-- 考勤汇总 -->
            <view class="u-m-t-50">
                <view class="u-font-32 font-bold">考勤汇总</view>
                <view class="u-m-t-30 uni-shadow">
                    <view class="u-flex u-row-between">
                        <text class="u-font-36 font-bold">当前月份：{{presentDate}}</text>
                        <view class="u-flex u-font-28" @tap.stop="dateShow=true">
                            <text class="u-m-r-10 uni-dec-color">{{presentDate}}</text>
                            <u-icon name="arrow-down" size="14" color="#5D6672"></u-icon>
                        </view>
                    </view>
                    <view class="u-m-t-40 u-flex u-row-between u-p-l-30 u-p-r-30">
                        <view v-for="(item,index) in months" :key="index" class="u-flex u-flex-col ">
                            <text class="u-font-52 font-bold">{{item.value}}</text>
                            <text class="u-m-t-20 u-font-26">{{item.title}}</text>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 考勤统计（日历） -->
            <view class="u-m-t-50">
                <text class="u-font-32 font-bold">考勤统计</text>
                <view class="u-m-t-30 uni-shadow" style="background:#fff">
                    <uni-calendar-edit :insert="true" :showMonth="false" 
                        :date="calendarDate" :selected="calendarSelected" @change="dateChange" >
                    </uni-calendar-edit>
                    <view class="u-m-t-20 u-flex u-row-right u-p-r-30">
                        <view class="u-m-r-20 u-flex">
                            <view class="u-m-r-10 yuan" style="background: #21A5F3;"></view>
                            <text class="u-font-24 uni-dec-color">正常出勤</text>
                        </view>
                        <view class="u-flex">
                            <view class="u-m-r-10 yuan" style="background: #ff5a5f;"></view>
                            <text class="u-font-24 uni-dec-color">考勤异常</text>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 考勤明细 -->
            <view class="u-m-t-40 uni-shadow">
                <view class="u-m-b-30">
                    <view class="u-text-center u-font-32 uni-dec-color font-bold">
                        {{memberDetail.xm}}的入出场明细
                    </view>
                    <view class="u-m-t-10 u-text-center">{{calendarDate}}</view>
                </view>
                <view class="uni-table">
                    <u-row class="uni-tr">
                        <u-col span="4" textAlign="center" class="u-font-28 font-bold">入出场规则</u-col>
                        <u-col span="2" textAlign="center" class="u-font-28 font-bold">状态</u-col>
                        <u-col span="4" textAlign="center" class="u-font-28 font-bold">进出场时间</u-col>
                        <u-col span="2" textAlign="center" class="u-font-28 font-bold">操作</u-col>
                    </u-row>
                    <view v-if="table.length!=0">
                        <u-row v-for="(item,index) in table" :key="index" class="uni-tr">
                            <u-col span="4" textAlign="center" class="u-font-28">{{item.gzdksj}}</u-col>
                            <u-col span="2" textAlign="center" class="u-font-28">{{item.status==1?'入场':'出场'}}</u-col>
                            <u-col span="4" textAlign="center" class="u-font-28">{{item.dksj?$moment(item.dksj).format('HH:mm'):''}}</u-col>
                            <u-col span="2" textAlign="center" class="u-font-28 uni-higt-color">
                                <text v-if="item.ywbh" @tap.stop="makeCard(item)">详情</text>
                                <text v-else-if="item.image" @tap.stop="vPhoto(item.image)">查看</text>
                                <text v-else @tap.stop="makeCard(item)">补卡</text>
                            </u-col>
                        </u-row>
                    </view>
                    <u-row v-if="table.length==0" class="uni-tr">
                        <u-col span="12" textAlign="center" class="u-font-28">暂无进出场明细</u-col>
                    </u-row>
                </view>
            </view>

            <!-- 间隙 -->
            <u-gap class="u-m-t-20" height="10rpx" bgColor="#FBFCFC"></u-gap>
        </view>

        <!-- 年月选择器 -->
        <u-datetime-picker 
            :show="dateShow"
            mode="year-month"
            :maxDate="maxDate"
            :value="presentDate"
            :formatter="formatter"
            :closeOnClickOverlay="true"
            @close="dateShow=false"
            @cancel="dateShow=false"
            @confirm="confirm">
        </u-datetime-picker>

        <!-- 提示组件 -->
        <u-toast ref="uToast"></u-toast>
    </view>
</template>

<script>
export default {
    data(){
        return{
            userInfo: uni.getStorageSync('userInfo'),
            bzbh: null, // 班组编号
            rybh: null, // 人员编号
            memberDetail:{ // 人员详情
                xm: '安薪乐',
                xb: '男',
                zjhm: '511011202101011234'
            }, 
            clockRule: null,  // 打开规则
            clockType: 0, // 打卡类型

            // 考勤汇总
            dateShow: false,
            maxDate: Date.parse(new Date()),
            presentDate: this.$tools.formatTime(new Date()).ym,
            months:[
                { field:'day', title:'考勤天数', value: 0 },
                { field:'atdStaffs', title:'出勤天数', value: 0 },
                { field:'unatdStaffs', title:'异常天数', value: 0 },
            ],

            // 考勤统计
            calendarDate: this.$tools.formatTime(new Date()).ymd,
            calendarSelected:[ // 1:正常 0:异常
                // { date: '2022-01-12', type:'1', info: '签到'  }, 
            ],

            // 进出场明细
            table:[],
        }
    },

    onLoad(option){
        this.bzbh = option.bzbh
        this.rybh = option.rybh
    },

    onShow(){
        this.clockType = 0
        // 人员详情
        this.getMemberDetail()
        // 考勤规则
        this.getClockRule()
        // 考勤概览(月汇总)
        this.getMemberKqPsatd()
        // 考勤统计(日历)
        this.getMemberKqTotal()
        // 考勤明细
        this.getMemberKqDetail()
    },


    methods: {
        // 返回
        back(){
            uni.navigateBack()
        },
        // 年月选择过滤函数
        formatter(type, value) {
            if (type === 'year') {
                return `${value}年`
            }
            if (type === 'month') {
                return `${value}月`
            }
            return value
        },

        // 选择打卡人员
        selectMember(){
            uni.navigateTo({ url: '/pages/member-bag/list?type=clock' })
        },


        // 人员详情
        getMemberDetail(){
            const api = JSON.parse(JSON.stringify(this.$apis.MemberDetail))
            api.url = api.url+'/'+this.rybh
            this.$request(this,api,{}).then(res=>{
                // console.log('人员详情',res)
                this.memberDetail = res
            }).then()
        },

        // 考勤规则
        getClockRule(){
            const test = {
                gcbh: this.userInfo.ssgcbh, // 工程编号【必传】
                bzbh: this.bzbh, // 班组编号【必传】
                rybh: this.rybh, // 人员编号【必传】
            }	
            this.$request(this,this.$apis.clockRule,test).then(res=>{
                // console.log('考勤打卡规则',res)
                if( res.length != 0 ){
                    this.clockRule = res
                    // 默认选中打卡类型
                    if( !res[0].zzjcsj && !res[0].zwccsj ) this.clockType = 1
                    if( !res[0].zzjcsj && res[0].zwccsj ) this.clockType = 1
                    if( res[0].zzjcsj && !res[0].zwccsj ) this.clockType = 2
                }else{
                    uni.$u.toast('当前人员未配置考勤打卡规则')
                }
            }).then()
        },
        // 去打卡
        goClock(){
            if( this.userInfo.isStartYdkq == 1 ){
                if( this.clockType ){
                    uni.$u.route({
                        url: '/pages/kaoqin-bag/clockin',
                        params: {
                            rybh: this.rybh,
                            clockType: this.clockType
                        }
                    });
                }else{
                    uni.$u.toast('请选择打卡类型')
                }
            }else{
                uni.$u.toast('当前项目未开通移动打卡')
            }
        },

        // 考勤汇总(月汇总)
        getMemberKqPsatd(){
            const parameter = {
                rybh: this.rybh,
                date: this.presentDate
            }
            this.$request(this,this.$apis.MemberKqPsatd,parameter).then(res=>{
                // // console.log('考勤汇总',res)
                this.months.map((v,i)=>{
                    v.value = res[v.field]
                })
            }).then()
        },
        // 考勤汇总时间改变
        confirm(e){
            this.presentDate = this.$tools.formatTime(new Date(e.value)).ym
            this.dateShow = false
            this.getMemberKqPsatd()
            this.calendarDate = this.$tools.formatTime(new Date(e.value)).ymd
            this.getMemberKqTotal()
            this.getMemberKqDetail()
        },

        // 考勤统计(日历)
        getMemberKqTotal(){
            const parameter = {
                rybh: this.rybh,
                kqrq: this.calendarDate
            }
            this.$request(this,this.$apis.MemberKqTotal,parameter).then(res=>{
                // console.log('考勤统计',res)
                res.map((v,i)=>{ // v.state状态（0:缺勤 1:异常 2:正常 3:未到时间）
                    if( v.state != 3 ){
                        this.calendarSelected.push({
                            date: v.date,
                            type: v.state == 0 || v.state == 1 ? 0 : 1   // 1:正常 0:异常
                        })
                    }
                })
            }).then()
        },
        // 考勤统计日期改变
        dateChange(e){
            this.calendarDate = e.fulldate
            this.getMemberKqDetail()
        },

        // 考勤明细
        getMemberKqDetail(){
            const parameter = {
                gcbh: this.userInfo.ssgcbh,
                bzid: this.bzbh,
                rybh: this.rybh, 
                bksj: this.calendarDate, 
            }
            this.$request(this,this.$apis.MemberKqDetail,parameter).then(res=>{
                // console.log('考勤明细',res)
                if( Array.isArray(res) ) this.table = res
            }).then()
        },

        // 预览打卡头像
        vPhoto(e) {
			if (!e) {
				return uni.$u.toast('暂无可预览头像');
			}
			uni.previewImage({
				count: e,
				urls: [e]
			});
		},
        // 补卡
        makeCard(e) {
            if( e.ywbh ){
                uni.navigateTo({ url:'/pages/examine-bag/detail?type=buka&status=1&id='+e.ywbh })
            }else{
                uni.$u.route({
                    url: '/pages/kaoqin-bag/buka-apply',
                    params: {
                        rybh: this.rybh,
                        bklx: e.status,
                        bksj: this.calendarDate+' '+e.gzdksj
                    }
                });
            }
		},
    },
}
</script>

<style scoped lang="scss">
    .content{
        // 人员信息
        .select-member{
            background: $uni-text-color-inverse;
            padding: 40rpx 0;   
            box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
            // 选择人员
            .select-btn{
                width: 136rpx;
                height: 50rpx;
                margin: 0;
                /deep/.u-button__text{
                    font-size: 24rpx !important;
                }
            }
            // 打卡
            .circle{
                width: 160rpx;
                height: 160rpx;
                margin: 0;
                background: #b6babc;
                box-shadow: 0px 4rpx 20rpx rgba(182,186,188,0.4);
                border-radius: 50%;
                border: none;
                /deep/.u-button__text{
                    font-size: 36rpx !important;
                    font-weight: bold !important;
                }
            }
        }
        // 打卡类型
        .clock-item{
            width: 48%;
            background: #f6f7f8;
            padding: 30rpx;
            border-radius: 10rpx;
        }
        // 激活背景颜色
        .active-bgcolor{
            background: linear-gradient(140deg, #47BBFF 0%, #21A5F3 100%) !important;
            box-shadow: 0px 4rpx 20rpx rgba(33, 165, 243, 0.4);
            view{
                color: #fff;
            }
        }

        // 日历
        .yuan{
            width: 28rpx;
            height: 28rpx;
            border-radius: 50%;
            opacity: 1;
        }

        // 进出场明细
        .uni-table{
            border: 1rpx solid #eee;
            .uni-tr{
                height: 80rpx;
                &:nth-child(odd){
                    background: #F6F7F8;
                }
                &:nth-child(even){
                    background: #fff;
                }
            }
        }
    }
</style>